.modal{
  @include position(fixed);
  z-index: 10;
  transition: all .5s;
  .mask{
    @include position(fixed);
    background-color: $colorI;
    opacity:0.5;
  }
  &.slide-enter-active{
    top:0;
  }
  &.slide-leave-active{
    top:-100%;
  }
  &.slide-enter{
    top:-100%;
  }
  .modal-dialog{
    @include position(absolute,50%,50%,660px,auto);
    background-color: $colorG;
    transform:translate(-50%,-50%);
    .modal-header{
      height: 60px;
      background-color: $colorJ;
      line-height: 60px;
      padding: 0 25px;
      font-size: $fontI;
      .icon-close{
        @include positionImg(absolute,23px,25px,14px,14px,'/imgs/icon-close.png');
        transition:transform .3s;
        &:hover{
          transform: scale(1.5);
        }
      }
    }
    .modal-body{
      padding: 42px 40px 54px;
      font-size: 14px;
    }
    .modal-footer{
      height: 82px;
      line-height:82px;
      text-align: center;
      background-color: $colorJ;
    }
  }
}

// .modal{
//   @include position(fixed);
//   z-index: 10;
//   transition: all .5s;
//   .mask{
//     @include position(fixed);
//     background-color: $colorI;
//     opacity: 0.5;
//   }
//   &.slide-enter-active{
//     top:0;
//   }
//   &.slide-leave-active{
//     top:-100%;
//   }
//   &.slide-enter{
//     top:-100%;
//   }
//   .modal-dialog{
//     @include position(absolute,40%,50%,660px,auto);
//     background-color: $colorG;
//     transform:translate(-50%,-50%);
//     .modal-header{
//       height:60px;
//       background-color: $colorJ;
//       padding:0 25px;
//       line-height: 60px;
//       font-size:$fontI;
//       .icon-close{
//         @include positionImg(absolute,23px,25px,14px,14px,'/imgs/icon-close.png');
//         transition: transform .3s;
//         &:hover{
//           transform: scale(1.5);
//         }
//       }
//     }
//     .modal-body{
//       padding:42px 40px 54px;
//       font-size:14px;
//     }
//     .modal-footer{
//       height: 82px;
//       line-height: 82px;
//       text-align: center;
//       background-color: $colorJ;
//     }
//   }
// }